<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.3 CSS3仿天猫专题过渡效果实例</title>
    <style>

        *{
            padding: 0px;
            margin: 0px;
            font-family: 'Microsoft YaHei';
        }
        .main{
            margin: 10px auto;
            width: 240px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .main img{
            width: 134px;
        }
        .main li{
            list-style: none;
            cursor: pointer;
        }
        .m_title{
            font-size: 24px;
            font-weight: bold;
             margin: 5px;
        }
        .m_cotent{
            color: #666;
             margin-bottom: 15px;
        }
        .m_img{
            position: relative;
            padding: 30px;
        }
        .m_img::before{
            content: "";
            position: absolute;
            width: 160px;
            height: 160px;
            background-color: #eee;
            border-radius: 50%;
            z-index: -1;
            left: 40px;
            top: 16px;
        }

        .m_img img{
          transform: scale(1);
            transition: all .5s;
        }
        .main li:hover .m_img img{
             transform: scale(1.1);
        }
    </style>
</head>
<body>
  <div class="main">
      <ul>
          <li>
               <div class="m_title">手机錧</div>
               <div class="m_cotent">r9s Plus</div>
                <div class="m_img"><img  src="https://gw.alicdn.com/bao/uploaded/i3/1939312479/O1CN011UBQJh5wpowklvh_!!0-item_pic.jpg" alt=""></div>
          </li>
      </ul>

  </div>
</body>
</html>